<script setup lang="ts">
</script>

<template>
  <form id="form" method="post" action="#" novalidate>
    <!-- 头像 -->
    <label class="avatar">
      &nbsp;<span
        >&nbsp;&nbsp;头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</span
      >
      <figure class="avatarUrl">
        <figcaption class="figcaption">更换头像</figcaption>
        <input id="avatar" type="file" name="avatar" />
        <img src="@/assets/my/user.png" />
      </figure>
    </label>

    <!-- 姓名 -->
    <label class="name" for="name">
      <span class="require">*</span
      >&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
      <input
        id="name"
        type="text"
        placeholder="请输入"
        autocomplete="on"
        name="name"
      />
    </label>

    <!-- 身份证号 -->
    <label class="useId" for="useId">
      <span class="require">*</span>
      &nbsp;身份证号：
      <input
        id="useId"
        type="text"
        placeholder="请输入"
        autocomplete="on"
        name="useId"
      />
    </label>

    <!-- 联系电话 -->
    <label class="tel" for="tel">
      <span class="require">*</span>&nbsp;联系电话：
      <input
        id="tel"
        type="tel"
        placeholder="请输入"
        autocomplete="on"
        name="tel"
      />
    </label>

    <!-- 联系地址 -->
    <label class="address" for="address" style="height: 72px">
      <span class="require">*</span>&nbsp;联系地址：
      <textarea name="address" id="address" cols="30" rows="10"></textarea>
    </label>

    <!-- 保存 -->
    <input id="submit" type="button" value="保&nbsp;存" />
  </form>
</template>

<style scoped lang="scss">
#form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px 0px;
}

// 头像--
.avatar {
  width: 165px;
  @include flexCenter;
  cursor: pointer;
}
.avatarUrl {
  margin-left: 12px;
  width: 80px;
  height: 80px;
  background-color: #e4eeff;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  @include flexCenterCenter;

  > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 0px 6px;
    text-align: center;
    color: #e4eeff;
    font-size: 12px;
    background-color: rgba($color: #000000, $alpha: 0.1);
  }

  #avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    border: transparent;
    color: transparent;
    outline: none;
    background-color: transparent;
    opacity: 0;
    cursor: pointer;
  }
}
// 头像==
.name,
.useId,
.tel,
.address {
  height: 34px;
  display: flex;
  align-items: center;
  color: #333333;
  cursor: pointer;

  > input {
    width: 360px;
    height: 100%;
    padding-left: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
  }
}

// 姓名的input框除去内阴影
#name {
  box-shadow: 0 0 0 60px #fff inset;
}

// 文本域的内容
textarea {
  width: 360px;
  height: 72px;
  color: #606266;
  border-radius: 4px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  /* 防止拖拽文本域 */
  resize: none;
  /* 取消轮廓线 */
  outline: none;
  //  对于块级元素是无效的，只针对行内元素和行内块元素(input,img,textarea)
  //  主要是控制图片/表单与文字的对齐
  vertical-align: middle;
}

#submit {
  @include submit;
  margin-left: 78px;
  margin-top: 10px;
}
</style>
